<template>
<div>
  <div id="app" v-cloak>
    <headers></headers>

    <div class="main_con clearfix">
      <div class="left_menu_con clearfix">
        <h3>用户中心</h3>
        <ul>
          <li><a href="/#/userinfo">· 个人信息</a></li>
          <li><a href="user_center_order.html">· 全部订单</a></li>
          <li><a href="/#/useraddress">· 收货地址</a></li>
          <li><a href="/#/user_center_pass" class="active">· 修改密码</a></li>
        </ul>
      </div>
      <div class="right_content clearfix" @submit.prevent="upd_pwd">
        <div class="info_con clearfix">
          <h3 class="common_title2">修改密码</h3>
          <div class="site_con pass_change_con">
            <form class="change_pwd">
              <div class="form_group">
                <label>当前密码：</label>
                <input type="password" class="old_pwd" name="old_pwd" v-model="form.password">
              </div>
              <div class="form_group">
                <label>新密码：</label>
                <input type="password" class="new_pwd" name="new_pwd" v-model="form.pwd" @blur="is_pwd">
                <span class="new_pwd_error">{{error.pwd}}</span>
              </div>
              <div class="form_group">
                <label>确认新密码：</label>
                <input type="password" class="new_cpwd" name="new_cpwd" v-model="form.pwd1" @blur="is_pwd">
                <span class="new_cpwd_error">{{error.pwd1}}</span>
              </div>
              <input type="submit" name="" value="确 定" class="info_submit">
              <input type="reset" name="" value="取 消" class="info_submit info_reset" @click="btn">
            </form>
          </div>
        </div>
      </div>
    </div>

    <footers></footers>
  </div>
</div>
</template>

<script>
import headers from "./headers";
import footers from "./footers";

export default {
  name: "user_center_pass",
  data(){
    return{
      form:{}, // 修改密码
      userid:localStorage.getItem('userid'),
      error:{password:"",pwd:"",pwd1:""}
    }
  },
  methods:{
    is_pwd(){
    let reg=/\w{8,20}/
      if(!reg.test(this.form.pwd)){
        this.error.pwd='密码请输入8-20位字符'
        return false
      }else {this.error.pwd=""}
      if(this.form.pwd != this.form.pwd1){
        this.error.pwd1='密码输入不一致'
        return false
      }else {
        this.error.pwd1=""
      }
    },
    upd_pwd(){
      alert(this.userid)
      this.$axios.put('login/?userid='+this.userid,this.form)
      .then(res=>{console.log(res)
      alert(res.data.meg)
        this.form={}
      })
    },
    btn(){
      this.$router.go(-1)
    }
  },
  components:{
    'headers':headers,
    'footers':footers
  }
}
</script>

<style scoped>

</style>
